<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <!-- Font Awesome 图标
    Font Awesome 是一套绝佳的图标字体库和CSS框架。

    Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

    要使用Font Awesome图标，请在HTML页面的 部分中添加以下行： -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <!-- jquerymobile -->
    <!-- jQuery Mobile 是用于创建移动 Web 应用的前端开发框架。

    jQuery Mobile 可以应用于智能手机与平板电脑。

    jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。 -->
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <title>bootstrap组件--折叠、轮播（12.14）</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        h2{
            margin-top: 100px;
        }
        .carousel-item img{
            width: 100%;
        }
    </style>
</head>
<body>
    <h2>轮播</h2>
    <div id="demo" class="carousel slide" data-ride="carousel">
        <!-- 指示符，计数器 -->
        <ul class="carousel-indicators">
            <li data-target="#demo" data-slide-to="0" class="active"></li>
            <li data-target="#demo" data-slide-to="1"></li>
            <li data-target="#demo" data-slide-to="2"></li>
            <li data-target="#demo" data-slide-to="3"></li>
        </ul>
        <!-- 轮播图片 -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="img/image/auto.jpg">
                <!-- 图片上的文字 -->
                <div class="carousel-caption">
                    <p>图片一</p>
                </div>
            </div>
            <div class="carousel-item active">
                <img src="img/image/nba.jpg">
            </div>
            <div class="carousel-item active">
                <img src="img/image/stock.jpg">
            </div>
            <div class="carousel-item active">
                <img src="img/image/yuetu.jpg">
            </div>
        </div>
        <!-- 左右切换按钮 -->
        <a href="#demo"class="carousel-control-prev" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a href="#demo" class="carousel-control-next" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>

    </div> 

    <h2>轮播</h2>
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="img/image/auto.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="img/image/nba.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="img/image/stock.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="img/image/yuetu.jpg" class="d-block w-100" alt="...">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>


    <h2>折叠</h2>
    <button class="btn btn-primary " data-toggle="collapse" data-target="#mydiv">折叠</button>
        <!-- 默认隐藏  class="collapse border"-->
    <!-- <div id="mydiv" class="collapse border"> -->
        <!-- 展开状态 class="collapse border show" -->
    <div id="mydiv" class="collapse border show">
        <p>这是折叠内容</p>
    </div>
    
    <h2>手风琴效果</h2>
    <div id="box">
        <div class="card">
            <div class="card-header">
                <!-- class="collapse show"  默认选项一展开 -->
                <a href="#div1" class="card-link" data-toggle="collapse " data-target="#">选项一</a>
            </div>
            <div id="div1" class="collapse show" data-parent="#box">
                <div class="card-body">
                    这是选项一内容
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <a href="#div2" class="card-link" data-toggle="collapse" data-target="#">选项二</a>
            </div>
            <div id="div2" class="collapse" data-parent="#box">
                <div class="card-body">
                    这是选项二内容
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <a href="#div3" class="card-link" data-toggle="collapse" data-target="#">选项三</a>
            </div>
            <div id="div3" class="collapse" data-parent="#box">
                <div class="card-body">
                    这是选项三内容
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <a href="#div4" class="card-link" data-toggle="collapse" data-target="#">选项四</a>
            </div>
            <div id="div4" class="collapse" data-parent="#box">
                <div class="card-body">
                    这是选项四内容
                </div>
            </div>
        </div>
    </div>
</body>
</html>